<script setup lang="ts">
  import { getPersonal } from '@/api/userCenter';
  import { ref } from 'vue';
  import { useUserStore } from '@/store';

  const userStore = useUserStore();
  getPersonal({
    user_id: userStore.userID,
  }).then((res) => {
    console.log('aaaaaaa', res);
  });

  const handleSubmit = ({ values, errors }) => {
    try {
      // 手动触发校验
      // await formRef.value.validate();
      console.log('校验通过，提交数据:', form);
    } catch (errors) {
      console.error('校验失败:', errors);
    }
  };

  const formType = ref([
    {
      label: '登录别名',
      name: 'user_nick_name',
      fieldProps: {
        span: 12,
        placeholder: '请输入',
        showWordLimit: true,
        allowClear: true,
        maxLength: 30,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
  ]);
  const formState = ref({
    real_name: '',
    account: '',
  });

  const data = [
    {
      label: '主角色',
    },
    {
      label: '辅助角色',
    },
    {
      label: '管理范围',
    },
    {
      label: '系统使用权限',
      value: '禁止查看用户列表  禁止显示桌面  使用用户KEY登录',
    },
    {
      label: '内部邮箱容量',
    },
    {
      label: '个人文件柜容量',
    },
  ];
</script>

<template>
  <div class="container">
    <a-card class="general-card" title="我的账户">
      <div style="width: 70%">
        <ProForm
          ref="formRef"
          :form-json="formType"
          :form-state="formState"
          :gutter="20"
        ></ProForm>
        <a-descriptions
          size="large"
          :column="1"
          :data="data"
          title="用户角色与管理范围"
          bordered
        >
        </a-descriptions>
      </div>
    </a-card>
  </div>
</template>

<style scoped lang="less"></style>
